<template>
	<view>
		<button class="slot-btn" type="default" open-type="getUserInfo" @getuserinfo="getAuthorize" withCredentials="true" hover-class="none">
			<slot></slot>
		</button>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name: 'wx-auth',
		props: {
			authType: {
				type: Array,
				default(){
					return ['authAvatar']
				}
			},
		},
		computed:{
			...mapState(['userinfo'])
		},
		data() {
			return {
				
			};
		},
		methods: {
			getAuthorize(res){
				uni.getUserInfo({
					provider:'weixin',
					success:(infoRes) => {
						if(infoRes.encryptedData){
							let params = {
								bind_token: this.userinfo.token,
								encrypted_data:infoRes.encryptedData,
								iv: infoRes.iv
							}
							let rawData = JSON.parse(infoRes.rawData)
							console.log(rawData)
							this.$api.setUserInfo(params).then(res => {
								this.$store.dispatch("set_authflag", {
									getUserInfo: true 
								})
								this.$store.dispatch("set_userinfo", {
									avatar: rawData.avatarUrl,
									nickname: rawData.nickName
								})
							})
						}
					},
					fail: () => {
					    uni.showToast({
							icon:"none",
					    	title: "请授权，部分功能授权之后才能使用"
					    })
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.slot-btn{
		background-color: rgba(0,0,0,0)!important;
		padding: 0;margin: 0;
		&::after {
			border: none;
		}
		&.button-hover {
			color:rgba(0, 0, 0, 0.6);
			background-color:#fff;
		}
	}
</style>
